<script setup>

import { ref, onMounted, watch, computed } from 'vue'

onMounted(() => {
  console.log(`the component is now mounted.`)
})
import {
  UserFilled,
  User,
  Crop,
  EditPen,
  SwitchButton,
  CaretBottom,
  Location,
  Menu as IconMenu,
} from '@element-plus/icons-vue'
import avatar from '@/assets/default.png'

import {userInfoService} from '@/api/user.js'
import useUserInfoStore from '@/stores/userInfo.js'
import {useTokenStore} from '@/stores/token.js'
const tokenStore = useTokenStore();
const userInfoStore = useUserInfoStore();
const userRole = computed(() => {
  const role = userInfoStore.info.userRole;
  console.log(`当前用户角色: ${role}`);
  return role;
});
//调用函数,获取用户详细信息
const getUserInfo = async()=>{
  //调用接口
  let result = await userInfoService();
  //数据存储到pinia中
  userInfoStore.setInfo(result.data);
}

getUserInfo();
//条目被点击后,调用的函数
import {useRouter, useRoute} from 'vue-router'
const router = useRouter();
import {ElMessage,ElMessageBox} from 'element-plus'
const handleCommand = (command)=>{
  //判断指令
  if(command === 'logout'){
    //退出登录
    ElMessageBox.confirm(
        '您确认要退出吗?',
        '温馨提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
    )
        .then(async () => {
          //退出登录
          //1.清空pinia中存储的token以及个人信息
          tokenStore.removeToken()
          userInfoStore.removeInfo()

          //2.跳转到登录页面
          router.push('/login')
          ElMessage({
            type: 'success',
            message: '退出登录成功',
          })

        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '用户取消了退出登录',
          })
        })
  }else{
    //路由
    router.push('/user/'+command)
  }
}

const activeIndex = ref('/welcome')
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}

const route = useRoute();
watch(() => route.path, (newPath, oldPath) => {
//   console.log(`路由路径从 ${oldPath} 变为 ${newPath}`);
  activeIndex.value = newPath;
}, {
  immediate: true // 组件挂载时立即触发一次回调
});

</script>

<template>
  <!-- element-plus中的容器 -->
  <el-container class="layout-container">
    <!-- 左侧菜单 -->
    <el-aside width="200px">
      <div class="el-aside__logo"></div>
      <!-- element-plus的菜单标签 -->
      <el-menu
          :default-active="activeIndex"
          active-text-color="#409eff"
          background-color="#fff"
          text-color="#333"
          router
          @select="handleSelect"
      >
        <el-menu-item index="/welcome">
          <el-icon>
            <Location />
          </el-icon>
          <span>首页</span>
        </el-menu-item>

        <el-sub-menu v-if="userRole === 'ADMIN'" index="1-3">
          <template #title>
            <svg t="1735809256358" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4609" width="16" height="16"><path d="M380.16 506.666667c5.333333 8.106667 13.866667 13.226667 23.466667 14.293333 9.6 1.066667 19.2-2.346667 25.813333-9.173333l174.08-172.16 116.906667 167.68c6.186667 8.96 16.213333 13.653333 26.24 13.653333 6.4 0 12.8-1.92 18.346666-5.76 14.506667-10.026667 18.133333-30.08 7.893334-44.586667l-138.666667-199.04a31.722667 31.722667 0 0 0-48.64-4.48l-173.226667 171.306667-108.16-165.973333a32.213333 32.213333 0 0 0-44.373333-9.386667 32.213333 32.213333 0 0 0-9.386667 44.373333l129.706667 199.253334z" p-id="4610"></path><path d="M906.666667 84.693333h-789.333334c-17.706667 0-32 14.293333-32 32s14.293333 32 32 32h18.986667v470.186667a53.333333 53.333333 0 0 0 53.333333 53.333333h256.426667L276.693333 887.466667c-10.88 13.866667-8.533333 33.92 5.333334 45.013333 5.76 4.693333 12.8 6.826667 19.84 6.826667 9.386667 0 18.773333-4.266667 25.173333-12.16L512 692.053333l184.96 235.093334c6.4 8.106667 15.786667 12.16 25.173333 12.16 6.826667 0 13.866667-2.133333 19.84-6.826667 13.866667-10.88 16.213333-31.146667 5.333334-45.013333l-169.386667-215.253334h256.426667a53.333333 53.333333 0 0 0 53.333333-53.333333V148.693333h18.986667c17.706667 0 32-14.293333 32-32s-14.293333-32-32-32z m-82.986667 523.52H200.32V148.693333h623.36v459.52z" p-id="4611"></path></svg>

            <span>会议室管理</span>
          </template>
          <el-menu-item index="/room/info">
            <span>会议室信息管理</span>
          </el-menu-item>
          <el-menu-item index="/room/book">

            <span>预约申请</span>
          </el-menu-item>
          <el-menu-item index="/room/bookApprove">
            <span>预约审核</span>
          </el-menu-item>
          <el-menu-item index="/room/myBookings">
            <span>我的预约</span>
          </el-menu-item>
          <el-menu-item index="/room/bookRecord">
            <span>预约记录</span>
          </el-menu-item>
          <el-menu-item index="/room/roomUsage">
            <span>会议室使用情况</span>
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu v-else-if="userRole === 'USER'" index="1-3">
          <template #title>
            <span>会议室预约</span>
          </template>
          <el-menu-item index="/room/book">
            <span>预约申请</span>
          </el-menu-item>
          <el-menu-item index="/room/myBookings">
            <span>我的预约</span>
          </el-menu-item>
          <el-menu-item index="/room/roomUsage">
            <span>会议室使用情况</span>
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu v-if="userRole === 'ADMIN'" index="1-4">
          <template #title>
            <svg t="1735809363361" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5697" width="16" height="16"><path d="M781.2 510.9l62.4 44.3-173.2 247.4-62.7 21.7-1.1-63.9 174.6-249.5m-5.7-68.9c-11.7 0-23.3 5.3-30.1 15.4L553.7 731.2c-3.7 5.5-7.3 14.6-7.3 21.9l1.8 104.1c0 21.4 18 36.4 36.7 36.4 3.6 0 7.3-0.6 10.8-1.7l100.4-34.7c7.3-1.8 14.6-7.3 18.3-12.8l191.7-273.8c11-16.4 7.3-38.3-9.1-51.1l-100.4-71.2c-6.4-4.2-13.8-6.3-21.1-6.3z" fill="" p-id="5698"></path><path d="M415 111c-125.9 0-228 102.1-228 228 0 81.7 43 153.4 107.6 193.6-91.1 42-153.7 131.9-171.6 244.4l-8.5 67.5C110 880.3 137.9 912 174 912h269.6c1.1 0 2.1-0.1 3.2-0.2 1.1 0.1 2.1 0.2 3.2 0.2 16.6 0 30-13.4 30-30s-13.4-30-30-30c-1.1 0-2.2 0.1-3.2 0.2-1-0.1-2.1-0.2-3.2-0.2H208c-18.1 0-32-15.8-29.8-33.7l4.1-32.7c5.3-32.5 14.9-62.7 28.6-90 13.4-26.6 30.4-49.7 50.5-68.9 41.2-39 94.2-59.7 153.5-59.7 30 0 58.8 5.5 85.5 16.5 5.9 2.4 11.7 5.1 17.3 8 4.4 2.3 9.2 3.4 13.9 3.4 9 0 17.8-4 23.6-11.5 11.5-14.8 6.9-36.5-9.8-45.1-3.5-1.8-7.1-3.6-10.8-5.3C599.7 492.8 643 421 643 339c0-125.9-102.1-228-228-228z m0 396c-44.9 0-87.1-17.5-118.8-49.2S247 383.9 247 339s17.5-87.1 49.2-118.8S370.1 171 415 171c44.9 0 87.1 17.5 118.8 49.2C565.5 251.9 583 294.1 583 339s-17.5 87.1-49.2 118.8C502.1 489.5 459.9 507 415 507z" fill="" p-id="5699"></path></svg>


            <span>用户管理</span>
          </template>
          <el-menu-item index="/user/manage">


            <span>用户信息管理</span>
          </el-menu-item>

        </el-sub-menu>
        <el-sub-menu index="1-5">
          <template #title>
            <svg t="1735809500530" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6757" width="16" height="16"><path d="M662.62186 561.268406c68.523788-46.884193 113.609197-126.232559 113.609197-216.401253 0-146.068057-119.020424-265.088481-265.088481-265.088481-146.072307 0-263.289697 119.020424-263.289697 263.284384 0 90.169757 45.08541 169.51706 113.61026 216.401253C206.375662 620.778086 98.177692 770.454336 98.177692 945.37731l0 0 73.936077 0 0 0c0-173.118878 131.641661-317.383901 299.353562-337.221524 1.804096 0 46.885256-3.60713 84.755343 0l3.60713 0 0 0c164.104771 23.441566 290.33733 164.101583 290.33733 335.417427l0 0 75.739111 0 0 0C924.101085 770.454336 815.903115 620.778086 662.62186 561.268406L662.62186 561.268406zM511.142576 541.431845c-110.006317 0-198.367727-88.363535-198.367727-198.36879 0-110.002067 88.362473-198.363477 198.367727-198.363477 110.001004 0 198.363477 88.36141 198.363477 198.363477C709.506053 453.069373 621.14358 541.431845 511.142576 541.431845L511.142576 541.431845zM511.142576 541.431845" fill="#272636" p-id="6758"></path></svg>

            <span>个人中心</span>
          </template>
          <el-menu-item index="/user/info">
            <span>我的账号</span>
          </el-menu-item>
          <el-menu-item index="/user/avatar">
            <span>头像设置</span>
          </el-menu-item>
          <el-menu-item index="/user/resetPassword">
            <span>修改密码</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <!-- 右侧主区域 -->
    <el-container>
      <!-- 头部区域 -->
      <el-header class="top_header">
        <div class="system_name">会议室预约管理系统</div>
        <div class="header_right">
          <span class="nickname">您好，{{ userInfoStore.info.nickname }}</span>
          <!-- 下拉菜单 -->
          <!-- command: 条目被点击后会触发,在事件函数上可以声明一个参数,接收条目对应的指令 -->
          <el-dropdown placement="bottom-end" @command="handleCommand">
                    <span class="el-dropdown__box">
                        <el-avatar :src="userInfoStore.info.userPic? userInfoStore.info.userPic:avatar" />
                        <el-icon>
                            <CaretBottom />
                        </el-icon>
                    </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="info" :icon="User">我的账号</el-dropdown-item>
                <el-dropdown-item command="avatar" :icon="Crop">头像设置</el-dropdown-item>
                <el-dropdown-item command="resetPassword" :icon="EditPen">修改密码</el-dropdown-item>
                <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <!-- 中间区域 -->
      <el-main>
        <!-- <div style="width: 1290px; height: 570px;border: 1px solid red;">
            内容展示区
        </div> -->
        <router-view></router-view>
      </el-main>

    </el-container>
  </el-container>
</template>

<style lang="scss" scoped>
::v-deep(.el-menu-item.is-active)  {
  background-color: rgba(255, 140, 161, 0.22) !important;
  color: #ff4063 !important;
  border-right: 3px solid #ff4063;
}


::v-deep(.el-menu-item:hover) {
  background-color: #8cc5ff38 !important;
}

::v-deep(.el-sub-menu__title:hover) {
  background-color: #8cc5ff38 !important;
}

.el-footer {
  line-height: 60px;
}

.layout-container {
  height: 100vh;

  .el-aside {
    background-color: #fff;

    &__logo {
      height: 60px;
      background: #fff;
    }

    .el-menu {
      border-right: none;
    }
  }

  .el-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-dropdown__box {
      display: flex;
      align-items: center;

      .el-icon {
        color: #999;
        margin-left: 10px;
      }

      &:active,
      &:focus {
        outline: none;
      }
    }
  }

  // .el-footer {
  //     display: flex;
  //     align-items: center;
  //     justify-content: center;
  //     font-size: 14px;
  //     color: #666;
  // }

  .top_header {
    position: relative;
    width: 100vw;
    left: -200px;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    display: flex;
    justify-content: space-between;

    .system_name {
      font-weight: bold;
      font-size: 24px;
      font-family: '方正楷体_GBK', sans-serif;
      color: #89030A;
    }

    .header_right {
      display: flex;
      flex-direction: row;
      align-items: center;

      .nickname {
        margin-right: 20px;
      }
    }

  }



}
</style>